<template>
    <div class="body">
        <div class="title-div">
            <el-tabs type="border-card" style="width: 1590px">
                <el-tab-pane label="用户管理" style="font-family: 微软雅黑;font-size:18px">
                    <div class="head">
                        <el-button @click="dialogFormVisible = true">添加员工</el-button>
                        <el-dialog title="添加员工" :visible.sync="dialogFormVisible">
                            <el-form :model="staff">
                                <el-form-item label="登陆账号" :label-width="formLabelWidth">
                                    <el-input v-model="staff.clerkAccountNumber" autocomplete="off"></el-input>
                                </el-form-item>
                                <el-form-item label="登陆密码" :label-width="formLabelWidth">
                                    <el-input v-model="staff.clerkPassword" autocomplete="off"></el-input>
                                </el-form-item>
                                <el-form-item label="姓名" :label-width="formLabelWidth">
                                    <el-input v-model="staff.clerkName" autocomplete="off"></el-input>
                                </el-form-item>
                                <el-form-item label="角色" :label-width="formLabelWidth">
                                    <el-select v-model="staff.roleId" placeholder="请选择">
                                        <el-option
                                                v-for="item in options"
                                                :key="item.roleId"
                                                :label="item.roleName"
                                                :value="item.roleId">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="年龄" :label-width="formLabelWidth">
                                    <el-input v-model="staff.clerkAge" autocomplete="off"></el-input>
                                </el-form-item>
                                <el-form-item label="性别" :label-width="formLabelWidth">
                                    <el-radio v-model="staff.clerkSex" label="1" style="font-family: 微软雅黑">男</el-radio>
                                    <el-radio v-model="staff.clerkSex" label="0" style="font-family: 微软雅黑">女</el-radio>
                                </el-form-item>
                                <el-form-item label="员工住址" :label-width="formLabelWidth">
                                    <el-input v-model="staff.clerkAddress" autocomplete="off"></el-input>
                                </el-form-item>
                                <el-form-item label="联系方式" :label-width="formLabelWidth">
                                    <el-input v-model="staff.clerkPhone" autocomplete="off"></el-input>
                                </el-form-item>
                            </el-form>
                            <div slot="footer" class="dialog-footer">
                                <el-button @click="dialogFormVisible = false">取 消</el-button>
                                <el-button type="primary" @click="dialogFormVisible = false,add()">确 定</el-button>
                            </div>
                        </el-dialog>
                    </div>
                    <div class="list">
                        <el-table
                                :data="tableData"
                                stripe
                                width="1560px">
                            <el-table-column
                                    prop="clerkId"
                                    label="编号"
                                    width="120">
                            </el-table-column>
                            <el-table-column
                                    prop="clerkName"
                                    label="姓名"
                                    width="150">
                            </el-table-column>
                            <el-table-column
                                    prop="roleName"
                                    label="角色"
                                    width="180">
                            </el-table-column>
                            <el-table-column
                                    prop="clerkAge"
                                    label="年龄"
                                    width="150">
                            </el-table-column>
                            <el-table-column
                                    label="性别"
                                    :formatter="pdage"
                                    width="150">
                            </el-table-column>
                            <el-table-column
                                    prop="clerkAddress"
                                    label="员工住址"
                                    width="250">
                            </el-table-column>
                            <el-table-column
                                    prop="clerkPhone"
                                    label="联系方式"
                                    width="230">
                            </el-table-column>
                            <el-table-column
                                    label="操作"
                                    width="170">
                                <template slot-scope="scope">
                                    <el-button
                                            size="mini"
                                            @click="dialogs= true,id(scope.row.clerkId)">编辑
                                    </el-button>
                                    <el-dialog title="修改信息" :visible.sync="dialogs">
                                        <ul>
                                            <li>员工编号:
                                                <el-input v-model="cxData.clerkId" placeholder="请输入内容"></el-input>
                                            </li>
                                            <li>姓名:
                                                <el-input v-model="cxData.clerkName" placeholder="请输入内容"></el-input>
                                            </li>
                                            <li>角色:<br/>
                                                <el-select v-model="cxData.roleId" >
                                                    <el-option
                                                            v-for="item in options"
                                                            :key="item.roleId"
                                                            :label="item.roleName"
                                                            :value="item.roleId">
                                                    </el-option>
                                                </el-select>
                                            </li>
                                            <li>员工年龄:
                                                <el-input v-model="cxData.clerkAge" placeholder="请输入内容"></el-input>
                                            </li>
                                            <li>性别:
                                                <el-radio-group v-model="cxData.clerkSex" >
                                                    <el-radio :label="0" style="font-family: 微软雅黑">女</el-radio>
                                                    <el-radio :label="1" style="font-family: 微软雅黑">男</el-radio>
                                                </el-radio-group>
                                            </li>
                                            <li>员工住址:
                                                <el-input v-model="cxData.clerkAddress" placeholder="请输入内容"></el-input>
                                            </li>
                                            <li>联系方式:
                                                <el-input v-model="cxData.clerkPhone" placeholder="请输入内容"></el-input>
                                            </li>
                                        </ul>

                                        <div slot="footer" class="dialog-footer">
                                            <el-button @click="dialogs = false">取 消</el-button>
                                            <el-button type="primary" @click="dialogs = false,update()">确 定</el-button>
                                        </div>
                                    </el-dialog>
                                    <el-button
                                            size="mini"
                                            type="danger"
                                            @click="handleDelete(scope.row.clerkId)">删除
                                    </el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                        <el-pagination
                                class="page"
                                background
                                @size-change="feny()"
                                @current-change="feny()"
                                layout="prev, pager, next"
                                :current-page.sync="saleQueryBo.page.current"
                                :page-size.sync="saleQueryBo.page.size"
                                :page-sizes="[5, 10, 15, 20, 25]"
                                :total="totlData" style="margin-left: 600px">
                        </el-pagination>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="角色管理">
                    <el-table
                            :data="roles"
                            height="735px"
                            style="width: 100%">
                        <el-table-column type="expand-row-keys">
                            <template slot-scope="scope">
                                <el-table
                                        :data="scope.row.functions"
                                        style="width: 100%">
                                    <el-table-column
                                            prop="fuName"
                                            label="角色权限"
                                            width="180">
                                    </el-table-column>
                                    <el-table-column
                                            label="操作"
                                            width="180">
                                        <template slot-scope="fscope">
                                            <el-button
                                                    size="mini"
                                                    @click="delAuthority(scope.row.roleId,fscope.row.fuId)">删除角色权限</el-button>
                                        </template>
                                    </el-table-column>
                                </el-table>
                                <el-button class="addFunction" type="primary" plain @click="showFunction(scope.row.roleId,scope.$index)">添加角色权限</el-button>
                            </template>
                        </el-table-column>
                        <el-table-column
                                prop="roleId"
                                label="角色编号"
                                width="180">
                        </el-table-column>
                        <el-table-column
                                prop="roleName"
                                label="角色介绍"
                                width="180">
                        </el-table-column>
                        <el-table-column
                                label="操作"
                                width="180">
                            <template slot-scope="scope">
                                <el-button
                                        size="mini"
                                        @click="roleEdit(scope.$index, scope.row)">编辑</el-button>
                                <el-button
                                        size="mini"
                                        type="danger"
                                        @click="roleDel(scope.$index, scope.row)">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-tab-pane>
                <el-tab-pane label="权限管理">
                    <div>
                        <el-table
                                :data="qxData"
                                style="width: 100%">
                            <el-table-column
                                    prop="date"
                                    label="权限"
                                    width="180">
                            </el-table-column>
                            <el-table-column
                                    prop="name"
                                    label="权限名称"
                                    width="180">
                                <input type="checkbox"/>
                            </el-table-column>
                            <el-table-column
                                    prop="address"
                                    label="中级">
                                <input type="checkbox"/>
                            </el-table-column>
                            <el-table-column
                                    prop="address"
                                    label="高级">
                                <input type="checkbox"/>
                            </el-table-column>
                        </el-table>
                    </div>
                    <div class="rigeth">
                        <el-button type="primary" plain>修改</el-button>
                    </div>
                </el-tab-pane>
            </el-tabs>
            <div>
                <el-dialog
                        title="提示"
                        :visible.sync="dialogVisible"
                        width="30%">
                    <div>
                        <div>
                            <ul class="add">
                                <li v-for="(f,index) in functions" :key="index">
                                    <span>{{f.fuName}}</span>
                                    <i class="el-icon-plus" @click="addAuthority(f.fuId)"></i>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <span slot="footer" class="dialog-footer">
                        <el-button @click="dialogVisible = false">取 消</el-button>
                        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
                    </span>
                </el-dialog>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "Staff",
        data() {
            return {
                dialogVisible:false,
                dialogTableVisible: false,
                dialogFormVisible: false,
                dialogs:false,
                roles:[],
                functions:[],
                i:null,
                qxData:{},
                staff: {
                    clerkAccountNumber: null,
                    clerkPassword: null,
                    clerkName: null,
                    roleId: null,
                    clerkAge: null,
                    clerkSex: null,
                    clerkAddress: null,
                    clerkPhone: null,
                    clerkBusinessId:JSON.parse(sessionStorage.getItem("clerk")).clerkBusinessId
                },
                formLabelWidth: '75px',
                tableData: {
                    clerkId: '1',
                    clerkName: '王小虎',
                    clerkAddress: '上海市普陀区金沙江路',
                    roleName:'1',
                    clerkAge:'19',
                    clerkSex:'男',
                    clerkPhone:'12345678910'
                },
                options:{
                    roleId: 1,
                    roleName: '管理员'
                },
                cxData:{
                    clerkId: '1',
                    clerkName: '王小虎',
                    clerkAddress: '上海市普陀区金沙江路',
                    roleName:'1',
                    clerkAge:'19',
                    clerkSex:"1",
                    clerkPhone:'12345678910',
                    clerkBusinessId:JSON.parse(sessionStorage.getItem("clerk")).clerkBusinessId
                },
                roleFunction:{
                    rfRoleId:0,
                    rfFunctionId:0,
                },
                saleQueryBo:{
                    page:{
                        size:15,
                        curren:1
                    },
                    businessId:JSON.parse(sessionStorage.getItem("clerk")).clerkBusinessId
                },
                totlData:null,
                index:"",
                bid:JSON.parse(sessionStorage.getItem("bid"))
            }
        },
        mounted() {
            this.roleLoad()
            this.clerkLoad();
            this.roleAndFunction();
        },
        methods: {
            showFunction(rid,index){
                this.roleFunction.rfRoleId = rid
                this.index = index
                let subscript = this.index
                this.$axios.post("/administration/function/query/function").then(result=>{
                    if (result.data){
                        this.dialogVisible=true;
                        this.functions = result.data
                        for (let i = 0; i < this.roles[subscript].functions.length; i++) {
                            for (let j=0;j< this.functions.length;j++){
                                if (this.roles[subscript].functions[i].fuId==this.functions[j].fuId){
                                    this.functions.splice(j,1);
                                    break;
                                }
                            }
                        }
                    }else {
                        this.$message({
                            message: '抱歉您没有修改权限!',
                            type: 'warning'
                        });
                    }
                })
            },
            addAuthority(fid){
                this.roleFunction.rfFunctionId = fid

                this.$axios.post("/administration/role-function/add/role/function",this.roleFunction).then(result=>{
                    if (result.data){
                        if (result.data>0){
                            this.$message({
                                message: '添加权限OK!',
                                type: 'success'
                            });
                            this.roleAndFunction();
                            this.showFunction(this.roleFunction.rfRoleId,this.index)
                        }else{
                            this.$message({
                                message: '添加失败!',
                                type: 'warning'
                            });
                        }
                    }else{
                        this.$message({
                            message: '抱歉您没有操作权限!',
                            type: 'warning'
                        });
                    }

                })
            },

            delAuthority(rid,fid){
                this.roleFunction.rfRoleId = rid
                this.roleFunction.rfFunctionId = fid
                this.$axios.post("/administration/role-function/del/role/function",this.roleFunction).then(result=>{
                    if (result.data){
                        if (result.data>0){
                            this.$message({
                                message: '删除成功!',
                                type: 'success'
                            });
                            this.roleAndFunction();
                        }else{
                            this.$message({
                                message: '删除失败!',
                                type: 'warning'
                            });
                        }
                    }else{
                        this.$message({
                            message: '抱歉您没有操作权限!',
                            type: 'warning'
                        });
                    }

                })
            },
            roleLoad(){
                this.$axios.post("/administration/role/all/role",this.bid).then(response=>{
                    if (response.data!=null){
                        this.options=response.data
                    }
                })
            },
            roleAndFunction(){
                this.$axios.post("/administration/role/query/role/function",this.bid).then(response=>{
                    this.roles=response.data
                })
            },
            clerkLoad(){
                this.$axios.post("administration/clerk/selectall",this.saleQueryBo).then(response=>{
                    if (response.data!=null){
                        this.tableData=response.data.records
                        this.totlData=response.data.total
                    }
                })
            },
            feny(){
                this.$axios.post("administration/clerk/selectall",this.saleQueryBo).then(response=>{
                    if (response.data!=null){
                        this.tableData=response.data.records
                        this.totlData=response.data.total
                    }
                })
            },
            id(id){
                this.$axios.post("administration/clerk/selectId",id).then(response=>{
                    if (response.data!=null){
                        this.cxData.roleId=this.options.roleId
                        this.cxData=response.data[0]
                    }
                })
            },
            update(){
                alert(this.cxData.roleId)
                if (this.cxData.clerkSex=="男"){
                    this.cxData.clerkSex=1
                }else if (this.cxData.clerkSex=="女"){
                    this.cxData.clerkSex=0
                }

                this.$axios.post("administration/clerk/updateClerk",this.cxData).then(response=>{
                    if(response.data){
                        if (response.data!=0){
                            alert("修改成功")
                            this.all()
                        }
                    }else {
                        this.$message({
                            message: '抱歉您没有操作权限!',
                            type: 'warning'
                        });
                    }

                })
            },
            handleDelete(id) {
               let c= confirm("确定要删除？")
                if (c==true){
                    this.$axios.post("administration/clerk/deleteClerk",id).then(response=>{
                        if (response.data){
                            if (response.data!=0){
                                alert("删除成功")
                                this.all()
                            }
                        }else {
                            this.$message({
                                message: '抱歉您没有操作权限!',
                                type: 'warning'
                            });
                        }

                    })
                }
            },
            add(){
                if (this.staff.clerkSex=="男"){
                    this.staff.clerkSex=1;
                }else if (this.staff.clerkSex=="女"){
                    this.staff.clerkSex=0;
                }

                if (this.staff.clerkAccountNumber==null){
                    alert("账号不能为空")
                    this.dialogFormVisible = true
                    return false;
                }
                let pwd=/^[0-9]{6,11}$/
                if (!pwd.test(this.staff.clerkPassword)){
                    alert("密码必须是6-11位之间的数字")
                    this.dialogFormVisible = true
                    return false;
                }
                if (this.staff.clerkPassword==""){
                    alert("密码不能为空")
                    this.dialogFormVisible = true
                    return false;
                }
                if (this.staff.clerkAddress==null){
                    alert("地址不能为空")
                    this.dialogFormVisible = true
                    return false;
                }
                if (this.staff.clerkAge==null){
                    alert("请填写年龄")
                    this.dialogFormVisible = true
                    return  false;
                }
                if (this.staff.clerkSex==null){
                    alert("性别不能为空")
                    this.dialogFormVisible = true
                    return false;
                }
                if (this.staff.clerkName==null){
                    alert("姓名不能为空")
                    this.dialogFormVisible = true
                    return false;
                }
                let phone=/^1[0-9]{10}$/
                if (!phone.test(this.staff.clerkPhone)){
                    alert("请输入正确的手机号")
                    this.dialogFormVisible = true
                    return false;
                }

                this.$axios.post("administration/clerk/add",this.staff).then(response=>{
                    if (response.data==1){
                        alert("添加成功")
                        this.clerkLoad()
                    }else if (response.data==2){
                        this.dialogFormVisible = true
                        alert("账号已存在,添加失败")
                    }
                })
            },
            pdage(a){
                if (a.clerkSex==1){
                    return "男"
                }else if (a.clerkSex==0){
                    return "女"
                }
            },
            all(){
                this.$axios.post("administration/clerk/selectall",this.saleQueryBo).then(response=>{
                    if (response.data!=null){
                        this.tableData=response.data.records
                        this.totlData=response.data.total
                    }
                })
            }
        },
    }
</script>

<style scoped>
    .title-div{
        margin-top: -20px;
        width: 81vw;
    }
    .body{
        width: 100%;
        padding-top: 2vw;
    }
    .head{
        width: 50vw;

    }
    .list{
        width: 80vw;
    }
    .rigeth{
        float: right;
    }
    ul li{
        list-style: none
    }
    label{
        font-family: 楷体;
        font-size: 18px;
    }
    .addFunction{
        width: 230px;
        margin-top: 5px;
        margin-left: 100px;
    }
    .add{
        width: 560px;
        height: 280px;
    }
    .add li{
        font-size: 12px;
        color: #409eff;
        margin-top: 10px;
        padding: 8px 10px 8px 20px;
        margin-right: 10px;
        border-radius: 10px;
        background-color: #ecf5ff;
        float: left;
        font-weight: normal;
        list-style-type: none;
    }
    .add li:hover{
        background-color: #b6f4b5;
    }
</style>
